<template>
	<div class="navbar-con">
		<div class="navbar-box">
			<span
				class="el-icon-s-unfold navbar-icon"
				@click="TOGGLE_SIDEBAR_AC"
				:class="{ 'is-active': this.sidebar.opened }"
			></span>
			<myBreadcrumb></myBreadcrumb>
		</div>
		<div class="navbar-xiala">
			欢迎{{ name }}登录本系统
			<el-dropdown>
				<span class="el-dropdown-link">
					<img src="@/assets/images/mz_small_icon.png" class="navbar_img" />
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>首页</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
import myBreadcrumb from "./myBreadcrumb.vue";
import { mapActions, mapGetters } from "vuex";
export default {
	name: "navbar",
	components: {
		myBreadcrumb,
	},
	methods: {
		...mapActions(["TOGGLE_SIDEBAR_AC"]),
		logout() {
      console.log("tuichu");
      this.$store.dispatch("LogoutAC");
      //location.reload();
      this.$router.go(0);
    },
		getOut() {
			this.$confirm("确认要退出吗, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.$message({
						type: "success",
						message: "退出成功!",
					});
					this.$router.push('/login')
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
	},
	computed: {
		...mapGetters(["sidebar", "name"]),
	},
};
</script>

<style lang="scss" scoped>
a {
	color: #606266;
}
.navbar-con {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	.navbar-box {
		display: flex;
		.navbar-icon {
			margin-top: 17px;
			margin-left: 17px;
			width: 16px;
			height: 16px;
			transform: rotate(0deg);
			transition: 1s;
			transform-origin: 50% 50%;
			display: inline-block;
		}
		.is-active {
			transform: rotate(90deg);
		}
	}
	.navbar-xiala {
		margin-right: 10px;
		.navbar_img {
			width: 40px;
			height: 40px;
			margin-top: 5px;
			border-radius: 5px;
		}
	}
}
</style>
